<script setup>
import {useStore} from "../../pinia/index.js";
import {onMounted, ref} from "vue";
import {get, post} from "../../util/request.js";
import {showToast} from "vant";

const onClickLeft = () => history.back()
const store = useStore()
const courseInfo= ref({courseId:''})
const openCourseVideo = ref({})
const courseVideoUrl= ref({})
const active = ref({})

// import videojs from "video.js";

// const player = videojs('my-player')
// player.landscapeFullscreen();

onMounted(()=>{

  courseInfo.value= store.currentCourse;

  get("openCourse/getVideoList",{courseId:courseInfo.value.courseId}).then(res=>{
    if (res.code == 0){
      openCourseVideo.value = res.data
      showToast("success");
    }else {
      showToast("fail")
    }
  })
})
const play = (item)=>{

  var videoElement = document.getElementById("my-player")
  videoElement.src = item.videoUrl;
  store.setOpenVideoCourseInfo(item)
// 可选：自动播放新视频
  videoElement.play();
}
</script>

<template>
  <div >
    <van-nav-bar
        :title="courseInfo.title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
  </div>

<div>
  <video
      id="my-player"
      class="video-js"
      controls
      preload="auto"
      width="390" height="244"
      poster="https://zpa-picgo.oss-cn-hangzhou.aliyuncs.com/img/20240620162034.png"
      data-setup='{}'>
<!--    <source v-bind:src="courseVideoUrl" type="video/mp4"></source>-->
    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<!--    <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>-->
<!--    <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>-->
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">
        supports HTML5 video
      </a>
    </p>
  </video>
  <van-tabs v-model:active="active" >
    <van-tab title="简介">
      <van-card
          :desc="courseInfo.teacher.profileText"
          :title="courseInfo.teacher.name"
          :thumb="courseInfo.teacher.imageUrl"
      >
        <template #tags>
          <van-tag plain type="primary">标签</van-tag>
          <van-tag plain type="primary">标签</van-tag>
        </template>
        <template #footer>
          <van-button >关注</van-button>
        </template>
      </van-card>

      <h3 style="text-align: left">视频合集</h3>
      <div v-for="item in  openCourseVideo">
        <br><h5 style="text-align: left">课程视频:{{item.title}}</h5>

        播放次数{{item.playTimes}}<br>
        持续时间{{item.duration}}
        <van-button round type="success" @click="play(item)" >点击播放 </van-button>
        <van-divider></van-divider>
      </div>


    </van-tab>
    <van-tab title="评论">内容 2

    </van-tab>

  </van-tabs>
  视频不能播放?<router-link to="feedback">点此反馈</router-link>

</div>



</template>

<style scoped>
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
</style>